<template>
  <c-loading :loading="loading" :bottomSafe="false">
    <view class="container classify">
      <view class="flex">
        <view class="sidebar">
          <scroll-view scroll-y class="scroll-view">
            <view>
              <view v-for="(item, index) in categories" :class="`sidebar-item-container ${index == activeIndex ? 'active' : ''}`" :key="index" @tap="changeTab(index)">
                <view :class="`sidebar-item  ${index == activeIndex - 1 ? 'bottom-radius' : ''}`">
                  <view class="sidebar-item-text text-overflow">
                    {{ item.categoryName }}
                  </view>
                </view>
              </view>
              <view class="sidebar-item-container">
                <view class="sidebar-item"></view>
              </view>
            </view>
          </scroll-view>
        </view>
        <view class="category-right">
          <scroll-view scroll-y class="scroll-view">
            <view class="category-container" v-if="!!categories[activeIndex]">
              <template v-for="(subitem, index) in categories[activeIndex].children" :key="index">
                <view v-if="subitem.children?.length" class="category--cont">
                  <view class="normal-item-title">
                    {{ subitem.categoryName }}
                  </view>
                  <view class="category-flex">
                    <view class="category-box" v-for="(item, i2) in subitem.children" :key="i2" @tap="toGoods(item)">
                      <c-img class="category-image" :src="item.categoryImg" />
                      <view class="category-text">
                        {{ item.categoryName }}
                      </view>
                    </view>
                  </view>
                </view>
                <view class="category-box" v-else @tap="toGoods(subitem)">
                  <c-img class="category-image" :src="subitem.categoryImg" />
                  <view class="category-text">
                    {{ subitem.categoryName }}
                  </view>
                </view>
              </template>
            </view>
          </scroll-view>
        </view>
      </view>
    </view>
  </c-loading>
</template>
<script setup>
import { CLoading, CImg } from '@/components';
import { goodsCategoryGetTree } from '@/api/goods';
import { ref } from 'vue';
import { useLoading, useRouter } from '@/hooks';

const categories = ref([]);

const activeIndex = ref(0);

const router = useRouter();
const { loading } = useLoading(async () => {
  categories.value = await goodsCategoryGetTree();
});

const changeTab = i => {
  activeIndex.value = i;
};

const toGoods = item => {
  router.push(`/pages/goods/index?cid=${item.id}`);
};
</script>
<style lang="scss">
.classify {
  .sidebar {
    width: 180px;
    height: 100vh;
    background-color: var(--color-background);
    flex-shrink: 0;
    .sidebar-item-container {
      background-color: var(--color-caption);
      .sidebar-item {
        position: relative;
        display: flex;
        justify-content: center;
        text-align: center;
        color: var(--color-default);
        padding: 20px 0;
        font-size: 26px;
        background-color: var(--color-background);
      }
    }

    .sidebar-item-text {
      width: 136px;
      padding: 8px 0;
      text-align: center;
      font-size: 28px;
      color: var(--color-gray);
    }

    .active.sidebar-item-container {
      background-color: var(--color-background);
    }

    .active .sidebar-item {
      background: var(--color-caption);
    }

    .active .sidebar-item::before {
      content: '';
      position: absolute;
      width: 6px;
      height: 48px;
      background-color: var(--color-primary);
      left: 0;
      top: 50%;
      transform: translate(0, -50%);
      border-radius: 6px;
    }

    .active .sidebar-item {
      color: var(--color-primary);
    }

    .active.sidebar-item-container + .sidebar-item-container .sidebar-item {
      border-top-right-radius: 36px;
    }

    .sidebar-item.bottom-radius {
      border-bottom-right-radius: 36px;
    }
  }
  .scroll-view {
    height: 100%;
  }

  .category-right {
    height: 100vh;
    background-color: var(--color-caption);
    flex-grow: 1;
    .category--cont {
      width: 100%;
    }
    view + .category--cont {
      margin-top: 20px;
    }
    .category-container {
      padding: 28px 34px 0px 32px;
      display: flex;
      flex-wrap: wrap;
    }

    .category-flex {
      display: flex;
      flex-wrap: wrap;
    }

    .normal-item-title {
      font-size: 28px;
      font-weight: 500;
    }

    .category-box {
      height: 196px;
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-top: 24px;
      width: 33.3%;
      .category-image {
        width: 140px;
        height: 140px;
        overflow: hidden;
        border-radius: 10px;
      }

      .category-text {
        justify-content: center;
        font-size: 24px;
        color: var(--color-gray);
        margin-top: 20px;
      }
    }
  }
}
</style>
